<template>
  <div>
    <el-dropdown trigger="click">
      <div class="db-wrapper"><i class="el-icon-coin" /><span style="margin:0 5px 0 10px;">{{ dbName }}</span><i class="el-icon-caret-bottom" /></div>
      <el-dropdown-menu slot="dropdown">
        <div v-for="(item, index) of databases" :key="'database' + index" class="drop-item flex" @click="change(item)">
          <span class="flex-1">{{ item.name }} / {{ item.db_name }}</span><i class="el-icon-delete" @click.stop="deleteDB(item)" />
        </div>
        <div class="drop-item flex" @click="dialogStatus = true"><span class="flex-1">新增</span><i class="el-icon-plus" /></div>
      </el-dropdown-menu>
    </el-dropdown>
    <!--新增-->
    <el-dialog :visible.sync="dialogStatus" :close-on-click-modal="false">
      <el-form label-width="100px">
        <el-form-item label="托管主机:">
          <el-radio-group v-model="database.local" @change="hostTypeChange">
            <el-radio :label="0">自有服务器</el-radio>
            <el-radio :label="1">托管服务器</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="项目名称:"><el-input v-model="database.name" /></el-form-item>
        <el-form-item label="数据库名称:"><el-input v-model="database.db_name" placeholder="英文或数字" /></el-form-item>
        <el-form-item v-if="database.local === 0" label="数据库类型:">
          <el-select v-model="database.driver">
            <el-option v-for="(drive, index) of sqlDrives" :key="'drive' + index" :label="drive" :value="drive" />
          </el-select>
        </el-form-item>
        <el-form-item v-if="database.local === 0" label="主机地址:"><el-input v-model="database.db_host" /></el-form-item>
        <el-form-item v-if="database.local === 0" label="账户名称:"><el-input v-model="database.db_user" /></el-form-item>
        <el-form-item v-if="database.local === 0" label="账户密码:"><el-input v-model="database.db_password" /></el-form-item>
        <el-form-item v-if="database.local === 0" label="字符编码:"><el-input v-model="database.db_charset" /></el-form-item>
        <el-form-item v-if="database.local === 0" label="排序规则:"><el-input v-model="database.db_collation" /></el-form-item>
        <!--<el-form-item label="表前缀:"><el-input v-model="database.table_prefix" /></el-form-item>-->
        <el-form-item><el-button type="primary" @click="create">确定</el-button></el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import database from '@/api/database'
export default {
  name: 'DatabaseSelect',
  components: {},
  data() {
    return {
      dialogStatus: false,
      sqlDrives: ['mysql', 'oracle', 'sqlServer'],
      databases: [],
      database: {
        id: 0,
        local: 0,
        name: '',
        driver: 'mysql',
        db_host: '',
        db_name: '',
        db_user: '',
        db_password: '',
        db_charset: 'utf8mb4',
        db_collation: 'utf8mb4_unicode_ci',
        table_prefix: ''
      }
    }
  },
  computed: {
    ...mapGetters([
      'sidebar',
      'avatar',
      'device',
      'dbName'
    ])
  },
  created() {
    this.search()
  },
  methods: {
    hostTypeChange() {
      console.log(this.database.hostType)
    },
    create() {
      database.create(this.database).then(res => {
        console.log(res)
        this.$message.success('创建成功')
        setTimeout(() => {
          location.href = location.origin + location.pathname
        }, 2000)
      }).catch(res => {
        console.log(res)
      })
    },
    search() {
      database.search().then(res => {
        this.databases = res.data
        // 设置默认项目
        for (const db of this.databases) {
          if (db.default === 1) {
            this.setCurrent(db)
          }
        }
      }).catch(res => {
        this.$message(res.message)
      })
    },
    change(db) {
      this.setCurrent(db)
      database.setDefault(db.id).then(res => {
        // 设置成功
      }).catch(res => {})
    },
    setCurrent(db) {
      this.$store.commit('database/SET_DB', { name: db.name, id: db.id, key: db.key })
    },
    deleteDB(db) {
      this.$confirm('确定要删除【' + db.name + '】吗').then(res => {
        database.delete(db.id).then(res => {
          this.search()
        }).catch(res => {
          this.$message(res.message)
        })
      })
    }
  }
}
</script>

<style scoped lang="scss">
.db-wrapper{
  font-size: 16px;
}
.drop-item{
  line-height: 2;
  padding:0 10px;
  font-size: 14px;
  cursor: pointer;
  span{
    margin-right:8px;
    text-align: justify;
    text-align-last: justify;
  }
}
.drop-item:hover{
  color: #fff;
  background-color: $menuActiveText;
}

.drop-item i:hover{
  color: $yellow;
}
</style>
